<template>
  <n-layout style="margin-top: 20px;" >
    <n-card >
      <n-thing >
        <template  #avatar>
          <n-avatar
              round
              :size="150"
              :src="userInfo?.avatar"
              @click="uploadImg"
              style="cursor: pointer;"
          />
          <SFormUploadImg
              style="display: none"
              @finish="finish"
              ref="uploadRef" name="picFileId"
                          :data="{folderName:'avatarPic'}"
                          v-model:value="picFileId"
                          />
        </template>
        <template  #header>
          <h2>{{ userInfo?.name }}</h2>
        </template>
        <template  #header-extra>
          <n-button @click="openPersonInfo" >编辑个人资料</n-button>
        </template>
        <template #description >
          <n-row style="border-top: 1px solid #dddddd;">
            {{userInfo?.signature || '他什么都没留下'}}
          </n-row>
          <n-row >
            年龄：{{userInfo?.age || '未填写'}}
          </n-row>
        </template>
      </n-thing>
      <n-thing class="person_thing">
        <template  #header>
          <SIcon :size="20" icon="icon-yinle4"/>
          最近播放
        </template>
<!--        <template  #header-extra>-->
<!--          <n-space inline>-->
<!--            <n-input placeholder="歌手/歌名" round/>-->
<!--            <n-button  :focusable="false"  :bordered="false" >-->
<!--              <SIcon :size="22" icon="icon-icon-test"/>-->
<!--            </n-button>-->
<!--          </n-space>-->
<!--        </template>-->
        <template #description >
            <n-list clickable hoverable  bordered style="border-top: 2px solid #C10D0C;" @mouseleave="showButKey=null">
              <n-list-item v-for="(item,index) of musicList"
                           @mouseenter="showButKey=item.id"
                           style="height: 40px;padding: 0 20px"
              >

                <n-grid>
                  <n-gi :span="1">{{index+1}}.</n-gi>
                  <n-gi :span="11">{{item.musicName}} - {{item.singerVo?.name}}</n-gi>
                  <n-gi :span="10">
                    <n-space v-if="item.id===showButKey">
                      <n-button size="small" circle title="播放"  @click="playMusic(item)">
                        <SIcon icon="PlayOutline"/>
                      </n-button>
                      <n-button size="small" circle title="添加到播放列表">
                        <SIcon icon="Add"/>
                      </n-button>
                      <n-button size="small" circle title="添加到歌单">
                        <SIcon icon="DuplicateOutline"/>
                      </n-button>
                      <n-button size="small" circle title="下载">
                        <SIcon icon="DownloadOutline"/>
                      </n-button>
                    </n-space>
                  </n-gi>
                  <n-gi :span="2">{{item.playUserNum}} 次播放</n-gi>
                </n-grid>
              </n-list-item>
            </n-list>
        </template>

        <template v-if="musicList.length > 10"  #footer>
          <n-row >
            <span style="padding-right: 0">查看更多</span>
          </n-row>


        </template>
      </n-thing>

      <n-thing class="tab_thing no_one">
        <template #avatar>
          <SIcon :size="30" icon="icon-yinle4"/>
        </template>
        <template  #header>
          我的歌单
        </template>
        <template  #header-extra>
          <n-space inline>
            <n-button @click="openAddSongList"  :focusable="false"  :bordered="false" title="创建歌单">
              <SIcon :size="22" icon="Duplicate"/>创建歌单
            </n-button>
          </n-space>
        </template>
      </n-thing>
      <n-grid x-gap="60" :cols="5" item-style="margin-top: 30px">
        <n-gi v-for="item of mySongList"  style="cursor: pointer;" @click="gotoSongList(item)">
          <div class="box-img">
            <div class="text" :style="{opacity: item.id === 0 ? 1 : 0}">
                 <SIcon size="80" class="center" icon="HeartOutline"/>
            </div>
            <n-image
                class="img"
                preview-disabled
                :width="140"
                :hidden="140"
                :src="item.picUrl || 'src/assets/img/109951163833244126.jpg'"
                fallback-src="src/assets/img/longjuanfeng.jpg"
            />
          </div>
          <n-thing description-style="color: #B2B2B2;font-size: 12px"
                   :title="item.name"
                   >
          </n-thing>
        </n-gi>
      </n-grid>
      <n-thing class="tab_thing no_one">
        <template #avatar>
          <SIcon :size="30" icon="icon-yinle4"/>
        </template>
        <template  #header>
          收藏的歌单
        </template>
      </n-thing>
      <n-grid x-gap="60" :cols="5" item-style="margin-top: 30px">
        <n-gi v-for="item of loveList"  style="cursor: pointer;" @click="gotoSongList(item)">
          <n-image
              :width="140"
              :hidden="140"
              preview-disabled
              :src="item.picUrl"
              fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
          <n-thing description-style="color: #B2B2B2;font-size: 12px"
                   :title="item.name"
                   >
          </n-thing>
        </n-gi>
      </n-grid>
    </n-card>


<!--    各种弹框-->
  <PersonInfo  ref="personRef" />
  <AddSongList ref="addSongRef" />
  </n-layout>
</template>
<script setup>
import {storeToRefs} from "pinia";
import useUserStore from "@/stores/admin/useUserStore";
import SIcon from "@/components/public/SIcon.vue";
import PersonInfo from "@/views/home/person/PersonInfo.vue";
import AddSongList from "@/views/home/person/AddSongList.vue";
import {getMyLoveSongList, getMySongList} from "@/api/music/songListApi";
import {getMusicHistory} from "@/api/music/musicApi";
import useMusicStore from "@/stores/admin/useMusicStore";
import SFormUploadImg from "@/components/public/extForm/SFormUploadImg.vue";
import {updateUser} from "@/api/system/userApi";
import cacheUtil from "@/utils/cacheUtil";
const {userInfo} = storeToRefs(useUserStore());

const uploadRef = ref();
const isOpen = ref(0)
let router = useRouter();
onMounted(()=>{
  if (!userInfo.value){
    naive.message.warning("未登录！")
    router.push({path:"/"})
  }else {
    getHistory(isOpen.value);
    getMyList()
    getMyLoveList()
  }
})
const picFileId = ref()
const addSongRef = ref()
const personRef = ref()
const showButKey = ref()
const openAddSongList = ()=>{
  addSongRef.value?.onAdd()
}
const openPersonInfo = ()=>{
  personRef.value?.open()
}
const uploadImg = () =>{
  uploadRef.value?.openOpenFileDialog()
}
const finish = (file)=>{
  updateUser({id:userInfo.value.id,avatarId:file.data.id}).then(res=>{
    userInfo.value.avatar = file.data?.url
    cacheUtil.session.set('userInfo',userInfo.value)
  })
}
const musicList = ref([])
const mySongList = ref([])
const loveList = ref([])
// watchEffect(()=>{
//   if (!userInfo.value){
//
//   }else {
//     getHistory();
//     getMyList()
//   }
// })
function getHistory(open = 0){
  getMusicHistory(open).then(res=>{
    musicList.value = res.data
  })
}
function getMyList(){
  getMySongList().then(res=>{
    mySongList.value = res.data
  })
}
function getMyLoveList(){
  getMyLoveSongList().then(res=>{
    loveList.value = res.data
  })
}

function playMusic(item){
  useMusicStore().playMusic(item)
}
const gotoSongList = (item)=>{
  router.push({
    path:`/songList/${item.id}`
  })
}
</script>
<style>
.person_thing{
  padding-top: 20px;
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;
  &.no_one{
    padding-top: 40px;
  }
}

.box-img{
  position: relative;
  width: 140px;
  height: 140px;
}
.box-img .img {
  position: relative;
  width: 140px;
  height: 140px;
  max-width: 100%;
}
.box-img .text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
